<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>tree</title>
<!-- css -->
<link id="v_theme" href="../../src/css/theme/aristo/theme.css" rel="stylesheet" type="text/css" />
<link href="../../src/css/primeui-1.1-min.css" rel="stylesheet" type="text/css" />
<!--lib js  -->
<script type="text/javascript" src="../../src/lib/vue.js"></script>
<script type="text/javascript" src="../../src/lib/jquery.min.js"></script>
<!-- js加载器 -->
<script type="text/javascript" src="../../src/loader/loader.js"></script>
<script type="text/javascript" src="../js/theme.js"></script>
</head>
<body>
<button onclick="loadData()">loadData()</button>
<button onclick="expandAll()">expandAll()</button>
<button onclick="collapseAll()">collapseAll()</button>
<button onclick="clearSelected()">clearSelected()</button>
<hr>
<div id="tree"></div>
<hr>
<div id="tree2"></div>


<script type="text/javascript">

var treeData = [{    
    "id":1,    
    "text":"Folder1",
    "iconCls":"icon-save",
    "children":[{    
        "text":"File1",    
        "checked":true   
    },{    
        "text":"Books",    
        "attributes":{    
            "url":"/demo/book/abc",    
            "price":100    
        },    
        "children":[{    
            "text":"PhotoShop",    
            "checked":true   
        },{    
            "id": 8,    
            "text":"Sub Bookds",    
            "state":"closed"   
        }]    
    }]    
},{    
    "text":"Languages",    
    "state":"closed",    
    "children":[{    
        "text":"Java"   
    },{    
        "text":"C#"   
    }]    
}]  


VUI
.dir('../../src/') // 设置JS存放根目录
.use('Tree',function(){
	tree = new VUI.Tree({
		renderId:'tree'
		,data:treeData
		,onClick :function(e) {
			console.log('onClick text:' + e.item.text);
		}
		,onBeforeSelect :function(e) {
			console.log('onBeforeSelect text:' + e.item.text);
		}
		,onSelect :function(e) {
			console.log('onSelect text:' + e.item.text);
		}
		,onBeforeExpand :function(e) {
			console.log('onBeforeExpand text:' + e.item.text);
		}
		,onExpand :function(e) {
			console.log('onExpand text:' + e.item.text);
		}
		,onBeforeCollapse :function(e) {
			console.log('onBeforeCollapse text:' + e.item.text);
			//return false;
		}
		,onCollapse :function(e) {
			console.log('onCollapse text:' + e.item.text);
		}
		,renderer:function(item) {
			var ret = item.text;
			if(item.text == 'File1') {
				ret = '<span style="color:red;">'+ret+'</span>';
			}
			return ret;
		}
	});
	
	tree2 = new VUI.Tree({
		renderId:'tree2'
		,url:'http://localhost:8087/emptyProject/exclude/treeData.jsp'
		,onLoadError:function() {
			var data = [{    
			    "id": 1,    
			    "text": "Node 1",    
			    "state": "closed",    
			    "children": [{    
			        "id": 11,    
			        "text": "Node 11"   
			    },{    
			        "id": 12,    
			        "text": "Node 12"   
			    }]    
			},{    
			    "id": 2,    
			    "text": "Node 2",    
			    "state": "closed"   
			}]  ;
			this.loadData(data);
		}
		,clickToggle:true
		,onLoadSuccess :function(data) {
			console.log('onLoadSuccess data length : ' + data.length);
		}
	});
});

function loadData(){
	var data = [{    
	    "id": 1,    
	    "text": "Node 1",    
	    "state": "closed",    
	    "children": [{    
	        "id": 11,    
	        "text": "Node 11"   
	    },{    
	        "id": 12,    
	        "text": "Node 12"   
	    }]    
	},{    
	    "id": 2,    
	    "text": "Node 2",    
	    "state": "closed"   
	}]  ;

	tree.loadData(data);
}

function collapseAll(){
	tree.collapseAll();
}
function expandAll(){
	tree.expandAll();
}
function clearSelected(){
	tree.clearSelected();
}


</script>
</body>
</html>